<template>
	<view @click="goPostInfo" class="card bg-white u-p-20 u-m-t-20">
		<view class="u-flex">
			<u-image shape="circle" width="42px" height="42px" :src="item.user.avatar">
			</u-image>
			<view class="u-m-l-24">
				<view class="u-font-16 color-3">
					{{item.title}}
				</view>
				<view class="u-font-10 color-80">
					{{item.publish_time}}
				</view>
			</view>
		</view>
		<view class="u-font-12 color-80 u-m-t-12 u-m-b-12">
			{{item.content}}
		</view>
		<view v-if="item.attachments && item.attachments.length" class="u-flex u-flex-wrap">
			<block v-for="sub in item.attachments" :key="sub.id">
				<u-image @tap.stop="previewImage(sub)" v-if="sub.filetype === 'image'" class="u-m-r-10 u-m-b-20"
					border-radius="28" width="208rpx" height="208rpx" :src="sub.attachment">
				</u-image>
				<video @tap.stop v-else class="video" :src="sub.attachment"></video>
			</block>
		</view>
		<view class="u-m-t-28">
			<u-tag class="u-m-r-8" color="#333" :text="item.category" bg-color="#FEF2BF" mode="dark" />
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		methods: {
			goPostInfo() {
				uni.navigateTo({
					url: '/pagesCommunity/postInfo/postInfo?id=' + this.item.id
				})
			},
			previewImage(item) {
				uni.previewImage({
					current: item.attachment,
					urls: this.item.attachments.filter(item => item.filetype === 'image').map(item => item
						.attachment)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.card {
		border-radius: 6px;

		.video {
			width: 208rpx;
			height: 208rpx;
		}
	}
</style>
